<%@page import="com.nebula.common.Const"%>
<%@page import="com.nebula.pojo.User"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="static/html5shiv.js"></script>
<script type="text/javascript" src="static/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/friends/all_7ea23d2.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/friends/global.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/friends/mbox-theme.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/friends/reset.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/friends/widget_ccf50cd.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/Hui-iconfont/1.0.8/iconfont.css" />
<!--[if IE 6]>
<script type="text/javascript" src="static/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>个人设置</title>

<style type="text/css">
a:HOVER{
	text-decoration: none;
}
a:link{
	text-decoration: none;
}
.sbtn {
    font-size: 14px;
    padding-left: 30px;
    height: 32px;
    line-height: 32px;
    position: relative;
    background-color: #3b8cff;
    border: 1px solid #3b8cff;
}
.dbtn {
    font-size: 14px;
    padding-left: 30px;
    height: 32px;
    line-height: 32px;
    margin: 0 4px;
}
.sbtn,.dbtn{
	color: #4d90eb;
    display: inline-block;
    _width: 35px;
    white-space: nowrap;
    outline: 0;
    text-decoration: none;
    border: 1px solid #c0d9fe;
    border-radius: 4px;
}
.sbtn b ,.dbtn b{
    font-weight: 100;
    display: block;
    height: 32px;
    line-height: 32px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.sbtn b{
	background-position: right -440px;
    color: #fff;
    padding-right: 30px;
}
.dbtn b {
    padding-right: 30px;
}
.clearfix {
    zoom: 1;
}
.sbtn:hover{
	background: #4d90eb;
}
</style>
</head>
  
<body>
<div class="setupInformation-dialog" style="display: block;left: 325px;top: 235.5px;">
	<div class="dlg-bd" >
	    <div class="info-content global-clearfix">
	        <a class="info-avatar" href="javascript:;" target="_blank" title="用户头像">
	            <img src="${pageContext.request.contextPath}/static/avatars/user.jpg" width="70" height="70">
	        </a>
	        <div class="info-nick-area">
		       	<span title="" class="info-nick-name" style="cursor: default;"></span>
		        <a href="javascript:;" class="setup-icon" title="设置昵称"></a>
	            <p class="info-uname" style="cursor: default;"></p>
	            <div class="setup-nick-name-area">
	                <p class="setup-nick-name-text" style="cursor: default;">设置昵称，让大家知道你是谁</p>
	                <form class="setup-form" action="javascript:;" method="post">
	                    <div class="setup-input-border">
	                        <input type="text" autocomplete="off" class="setup-input">
	                    </div><span class="setup-num"><em id="use">0</em>/12</span><a class="setup-btn-ok sbtn"><b>保存</b></a><a class="setup-btn-cancel dbtn"><b>取消</b></a>
	                </form>
	                <p class="setup-nick-name-tips"></p>
	            </div>
	        </div>
	    </div>
	</div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layer/2.4/layer.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
$(function(){
	info = function(){
		$.ajax({
			type : "post",
			url : "/nebula/user/get-nickname.action",
			dataType: "json",
			async: false,
			success : function(_data){
				if(_data.data.nickname == "-"){
					$(".info-nick-name").attr("title","设置昵称");
					$(".info-nick-name").html("设置昵称");
				}else{
					$(".info-nick-name").attr("title",_data.data.nickname);
					$(".info-nick-name").html(_data.data.nickname);
					$(".setup-input").val(_data.data.nickname.trim());
					$("#use").html($(".setup-input").val().trim().length);
				}
				$(".info-uname").attr("title", _data.data.username);
				$(".info-uname").html("大岭山中学网盘帐号：" + _data.data.username);
			}
		});
	}
	
	info();	
	
	$(".setup-icon").click(function(){
		$(".setup-nick-name-area").show();
		$(".setup-input").focus();
	});
	
	$(".dbtn").click(function(){
		$(".setup-nick-name-area").hide();
	});
	
	$(".setup-input").on("keyup paste",function(){
		$("#use").html($(this).val().trim().length);
		if($(this).val().trim() == "" || $(this).val().trim().length == 0){
			$("#use").css("color","red");
			$(".setup-nick-name-tips").show();
			$(".setup-nick-name-tips").html("请输入至少一个字");
			$(".sbtn").addClass("disabled");
			$("#use").html(0);
		}else if($(this).val().trim().length > 12){
			$("#use").css("color","red");
			$(".setup-nick-name-tips").show();
			$(".setup-nick-name-tips").html("昵称最长为12个字");
			$(".sbtn").addClass("disabled");
		}else{
			var regex=/^[\u4e00-\u9fa50-9A-Za-z]+$/;
			var result = regex.test($(this).val().trim());
			if(result == false){
				$("#use").css("color","red");
				$(".setup-nick-name-tips").show();
				$(".setup-nick-name-tips").html("昵称只能位数字、中文、英文，不能有特殊字符！");
				$(".sbtn").addClass("disabled");
			}else{
				$.ajax({
					type: "post",
					url: "/nebula/user/check-nickname.action",
					data: {
						nickname : $(this).val().trim(),
					},
					dataType: "json",
					success: function(_data){
						if(_data.status == 0){
							$(".setup-nick-name-tips").hide();
							$(".sbtn").removeClass("disabled");
							$("#use").css("color","");
						}else{
							$("#use").css("color","red");
							$(".setup-nick-name-tips").show();
							$(".setup-nick-name-tips").html(_data.msg);
							$(".sbtn").addClass("disabled");
						}
					}
				});
			}
		}
	});
	
	$(".sbtn").click(function(){
		if(!$(this).hasClass("disabled")){
			$.ajax({
				type: "post",
				url : "/nebula/user/set-nickname.action",
				data : {
					nickname : $(".setup-input").val().trim(),
				},
				success: function(_data){
					if(_data.status == 0){
						parent.layer.msg(_data.msg,{icon:1,time:2000,offset:"t"});
					}else{
						parent.layer.msg(_data.msg,{icon:2,time:2000,offset:"t"});
					}
					setTimeout(function() {
						$(".setup-nick-name-area").hide();
						info();
					},300);
				}
			});
		}
	})
});
</script>
</body>
</html>
